<template>
    <div class="app-container">
        <el-button @click="infoVClick">完善个人信息</el-button>
        <h2>当前宿舍:{{ now_dorm }}</h2>
        <el-table :data="log_list">
            <el-table-column label="学号" align="center" prop="stuNo" />
            <el-table-column label="姓名" align="center" prop="stuName" />
            <el-table-column label="宿舍" align="center" prop="roomId" width="200">
                <template slot-scope="scope">
                    <span>{{ scope.row.campusName + " " + scope.row.parkName + " " + scope.row.buildingName + " " +
                        scope.row.floorName + "层" + scope.row.roomNo }}</span>
                </template>
            </el-table-column>
            <el-table-column label="开始日期" align="center" prop="startDate" />
            <el-table-column label="结束日期" align="center" prop="endDate" />
            <el-table-column label="折合月数" align="center" prop="inMonth" />
            <el-table-column label="收费标准/10个月" align="center" prop="mainMoney" />
            <el-table-column label="应收费用" align="center" prop="needMoney" />
            <el-table-column label="农行卡号" align="center" prop="bankCard" />
            <el-table-column label="区间" align="center" prop="rangeName" />
            <el-table-column label="费用状态" align="center" prop="applyStatus">
                <template slot-scope="scope">
                    <dict-tag :options="dict.type.dms_record_status" :value="scope.row.applyStatus" />
                </template>
            </el-table-column>
            <el-table-column label="操作" align="center">
                <template slot-scope="scope">

                    <el-button v-if="scope.row.applyStatus == '6'" size="mini" type="text" icon="el-icon-edit"
                        @click="fullInfo(scope.row)">
                        <span>填充信息</span>
                    </el-button>
                    <el-button v-if="scope.row.applyStatus == '6'" size="mini" type="text" icon="el-icon-check"
                        @click="confirm(scope.row)">
                        <span>确认</span>
                    </el-button>
                </template>
            </el-table-column>
        </el-table>

        <el-dialog title="完善信息" :visible.sync="infoV">
            <el-form ref="elForm" :model="formData" :rules="rules" size="medium" label-width="100px">
                <el-form-item label="手机号" prop="phone">
                    <el-input v-model="formData.phone" placeholder="请输入手机号" :maxlength="11" show-word-limit clearable
                        prefix-icon='el-icon-mobile' :style="{ width: '100%' }"></el-input>
                </el-form-item>
                <el-form-item label="农行卡号" prop="xhk">
                    <el-input v-model="formData.xhk" placeholder="请输入农行卡号" clearable
                        :style="{ width: '100%' }"></el-input>
                </el-form-item>
                <el-form-item size="large">
                    <el-button type="primary" @click="submitForm">提交</el-button>
                    <el-button @click="resetForm">重置</el-button>
                </el-form-item>
            </el-form>
        </el-dialog>

    </div>
</template>

<script>
import { fullInfo } from "@/api/dormitory/new/record";
import { listXw, getOwnLog, stuConfirm } from "@/api/dormitory/new/stuDom";
import { fullLoading, isEmpty } from "@/api/helpFunc";
import { getOwnInfo, changeOwnInfo } from "@/api/stuCQS/basedata/student";
import { alipayVali } from "@/api/helpFunc/bank";

export default {
    dicts: ['dms_record_status'],
    name: "stuDom_stu",
    data() {
        return {
            log_list: [],
            now_dorm: "暂无",

            infoV: false,
            formData: {
                phone: '',
                xhk: '',
            },
            rules: {
                phone: [{
                    required: true,
                    message: '请输入手机号',
                    trigger: 'blur'
                }, {
                    pattern: /^1(3|4|5|7|8|9)\d{9}$/,
                    message: '手机号格式错误',
                    trigger: 'blur'
                }],
                xhk: [{
                    required: true,
                    message: '请输入农行卡号',
                    trigger: 'blur'
                }],
            },
        }
    },
    created() {
        this.lookLog();
    },
    methods: {
        async fullInfo(val) {
            let id = val.id;
            let loading = fullLoading(this);
            let res = await fullInfo(id);
            loading.close();
            if (res.code == 200) {
                this.$message.success(res.msg);
                this.lookLog();
            }
        },

        async infoVClick() {
            let res = await getOwnInfo();
            if (res.code == 200) {
                if (!isEmpty(res.data)) {
                    let data = { ...res.data };
                    this.formData.phone = data.phone;
                    this.formData.xhk = data.xhk;
                }
            }
            this.infoV = true;
        },
        submitForm() {
            this.$refs['elForm'].validate(async valid => {
                if (!valid) return;
                let sdata = { ...this.formData };

                let card = sdata.xhk;
                let boolCard = await alipayVali(card);
                if (boolCard.validated == false) {
                    this.$message.info("请输入正确的银行卡号");
                    return;
                }
                if (boolCard.bank != "ABC") {
                    this.$message.info("请输入正确的中国农业银行银行卡号");
                    return;
                }

                let loading = fullLoading(this);
                let res = await changeOwnInfo(sdata);
                loading.close();
                if (res.code == 200) {
                    this.$message.success(res.msg);
                }


            });
        },
        resetForm() {
            this.$refs['elForm'].resetFields();
        },
        async confirm(row) {
            if (row.bankCard == "无" || isEmpty(row.bankCard)) {
                this.$message.info("您的银行卡未填写，请完善个人信息");
                return;
            }

            if (row.stuPhone == "无" || isEmpty(row.stuPhone)) {
                this.$message.info("您的手机号未填写，请完善个人信息");
                return;
            }

            this.$confirm('请检查信息是否正确,这很重要, 您真的要确认吗?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(async () => {
                let loading = fullLoading(this);
                let res = await stuConfirm(row.id);
                loading.close();
                if (res.code == 200) {
                    this.$message.success(res.msg);
                    this.lookLog();
                }
            }).catch(() => {

            });

        },
        async lookLog() {
            let loading = fullLoading(this);
            let res = await getOwnLog();
            loading.close();
            if (res.code == 200) {
                console.log(res);
                let data = { ...res.data };
                let temp = [...data.record];

                let i = 0;
                temp.map(x => {
                    if (x.startDate == "1970-01-01") {
                        x.startDate = "学期开始";
                    }
                    if (x.endDate == "1970-01-01") {
                        x.endDate = "学期结束";
                    }
                    i++;
                });
                this.log_list = [...temp];
                if (data.dormStu != null) {
                    let temp = { ...data.dormStu };
                    this.now_dorm = temp.campusName + " " + temp.parkName + " " + temp.buildingName + " " + temp.floorName + "层" + temp.roomNo;
                }
                this.logV = true;
            }
        },
    }
}

</script>